<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-09-10 08:54:06
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:33:51
-->
<template>
  <div>
    <div class="allMain">
      <el-dialog
        title="人员报名"
        :visible.sync="dialogObj.detailShow"
        width="60%"
        @close="detailClose"
        :close-on-click-modal="false"
      >
        <div v-if="signUp.length > 1" class="main">
          <el-steps :active="active" simple finish-status="success">
            <el-step
              :title="item.name"
              v-for="(item, index) in signUp"
              :key="index"
            >
            </el-step>
          </el-steps>
          <div
            v-for="(item, index) in formList"
            :key="index"
            :class="active == index ? 'main-content' : ''"
          >
            <div
              v-for="(item1, index1) in item"
              :key="index1"
              v-show="item1.isHidden"
              style="width: 50%"
            >
              <main-con
                :formList="item1"
                v-if="index === active"
                class="main-con"
                ref="mainContent"
              ></main-con>
            </div>
          </div>
        </div>
        <div v-else class="main">
          <div
            v-for="(item, index) in formList"
            :key="index"
            class="main-content"
          >
            <div
              v-for="(item1, idnex1) in item"
              :key="idnex1"
              style="width: 50%"
              v-show="item1.isHidden"
            >
              <main-con
                :formList="item1"
                class="main-con"
                ref="mainContent"
              ></main-con>
            </div>
          </div>
        </div>
        <span slot="footer">
          <el-button @click="dialogObj.detailShow = false">取消</el-button>
          <el-button type="primary" @click="next">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getCustom, registerInformation } from "@/api/registration";
import { replace } from "@/api/refund";
import MainCon from "../../../RegistrationSettings/conponents/mainCon.vue";
export default {
  components: {
    MainCon,
  },
  data() {
    return {
      dialogOrderEject: false,
      fwData: {},
      timer: null,
      timer2: null,
      endTime: 0,
      PayImgUrl: "",
      outTradeNo: "",
      voucher: "",
      fileList: [],
      formList: [],
      arr: [],
      dialogImageUrl: "",
      dialogVisible: false,
      ExaInfo: {},
      sign: "在线报名",
      active: 0,
      dialogOrder: false,
      innerVisibleOne: false,
      innerVisibleTwo: false,
      innerVisibleThree: false,
      dialog: Number,
      // PayConfig: {},
    };
  },
  props: {
    dialogObj: {
      type: Object,
      required: true,
    },
    signUp: {
      type: Array,
      required: true,
    },
  },
  created() {
    this.ExaInfo = JSON.parse(sessionStorage.getItem("ExaInfo")) || {};
    this.arr = [];
    this.$nextTick(function () {
      if (this.signUp.length == 1) {
        this.arr.push(this.signUp[0].id);
      } else {
        this.signUp.forEach((item) => {
          this.arr.push(item.id);
        });
      }
      this.getCustomList();
    });
  },
  mounted() {},

  methods: {
    detailClose() {
      this.dialogObj.detailEject = false;
      this.$parent.signUp = [];
    },
    storage() {
      let fd = new FormData();
      fd.append("id", this.ExaInfo.id);
      fd.append("personId", this.signUp[0].id);
      fd.append("list", JSON.stringify(this.formList));
      fd.append("batchId", this.ExaInfo.batchId);
      replace(fd).then((res) => {
        this.$parent.getOrderInfo(this.$parent.orderForm.orderNumber);
        this.$parent.modityShow = false;
        this.dialogObj.detailShow = false;
      });
    },
    getCustomList() {
      console.log(this.signUp);
      let fd = new FormData();
      fd.append("examType", this.ExaInfo.examId);
      fd.append("ids", JSON.stringify(this.arr));
      fd.append("batchId", this.ExaInfo.batchId);
      fd.append("check", "false");
      getCustom(fd).then((res) => {
        this.formList = res.data;
      });
    },
    // 下一步
    next() {
      let arr = [];
      for (var i = 0; i < this.$refs.mainContent.length; i++) {
        this.$refs.mainContent[i].$refs.formList.validate((valid) => {
          if (!valid) {
            arr.push("false");
          } else {
            arr.push("true");
          }
        });
      }
      let a = arr.some((item) => {
        return item == "false";
      });
      if (a == true) {
        return;
      } else {
        this.storage();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.allMain {
  /deep/ .el-dialog__body {
    height: 600px;
    overflow: auto;
  }
}
.main {
  width: 100%;
}
.main-content {
  display: flex;
  flex-wrap: wrap;

  width: 100%;
}
.content-all {
  width: 50%;
}
.basics {
  position: relative;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  margin-top: 10px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.basics-detail {
  margin-top: 20px;
  .basics-detail-info {
    margin-bottom: 10px;
    span {
      margin-left: 40px;
    }
  }
}
.exainfoPay {
  display: flex;
  .payment-all {
    .payment {
      margin-top: 50px;
      width: 152px;
      height: 40px;
      line-height: 40px;
      border-radius: 2px;
      border: 1px solid #d6d6d6;
      text-align: center;
      margin-right: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      position: relative;
      .payment-img {
        position: absolute;
        bottom: -12px;
        right: -1px;
      }
      img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        margin-bottom: 4px;
      }
    }
  }
}
.active {
  border: 1px solid #1267fa !important;
}
.load {
  margin-top: 20px;
}
.payimg {
  width: 530px;
  background-color: #f6f7f8;
  height: 300px;
  margin-top: 20px;
  img {
    display: block;
    margin: auto;
    transform: translateY(25%);
    width: 200px;
    height: 200px;
  }
}
.comInfo {
  box-sizing: border-box;
  width: 530px;
  background-color: #f6f7f8;
  padding: 10px 20px;
  margin-top: 10px;
}
</style>
